<template>
  <v-app>
    <!-- 主图-->
    <v-sheet class="pt-[72px]">
      <!-- :SubImage="bannerImageMo" -->
      <banner-image
        :HeadImage="swiperData.imgs[0] ? swiperData.imgs[0].url : ''"
        :HeadLabel="swiperData.name"
        :SubLabel="swiperData.desc"
      />
    </v-sheet>

    <!-- 骑手最爱 -->
    <!-- <v-sheet color="transparent">
      <div class="text-center pt-16">
        <p class="font-buttershine-serif text-[#333] text-3xl lg:text-4xl">
          {{ $t("shop.body.choose.title1") }}
        </p>
        <p class="text-sm font-light py-3 tracking-tight tracking-wide">
          {{ $t("shop.body.choose.title2") }}
        </p>
      </div>
      <div class="d-flex justify-center pb-16">
        <v-sheet color="transparent">
          <v-row>
            <v-col
              v-for="(item, index) in 3"
              :key="'pd-' + index"
              class="d-flex justify-center pa-0 m-15"
            >
              <v-card
                elevation="0"
                rounded="0"
                link
                :class="['ma-3']"
                color="#F5F4F2"
                class="sm:w-[425px] w-[340px]"
              >
                <v-img :src="item.imageUrl"></v-img>

                <div class="text-center">
                  <div class="pt-6 text-xl font-semibold text-[#333]">
                    {{ item.title }}
                  </div>
                  <div
                    class="pt-4 mb-10 text-[#786554] underline underline-offset-8"
                    @click="goGallery"
                  >
                    {{ item.shop }}
                  </div>
                </div>
              </v-card>
            </v-col>
          </v-row>
        </v-sheet>
      </div>
    </v-sheet> -->
    <!-- <v-sheet class="d-flex flex-column pt-8 pb-10">
      <div class="text-center pt-16">
        <p class="font-buttershine-serif text-[#333] text-3xl lg:text-4xl">
          {{ $t("shop.body.choose.title1") }}
        </p>
        <p class="text-sm font-light py-3 tracking-tight tracking-wide">
          {{ $t("shop.body.choose.title2") }}
        </p>
      </div>
      <v-sheet
        class="mx-auto w-[100%] sm:w-[555px] md:w-[990px] xl:w-[1438px]"
        elevation="0"
        color="transparent"
      >
        <v-slide-group
          class="pt-4 pb-0"
          selected-class="bg-primary"
          mandatory
          show-arrows
        >
          <v-slide-group-item
            v-for="item in 3"
            v-slot="{ isSelected, toggle, selectedClass }"
          >
            <v-card
              elevation="0"
              rounded="0"
              link
              :class="['ma-3', selectedClass]"
              color="#F5F4F2"
              class="sm:w-[425px] w-[340px]"
            >
              <v-img :src="item.imageUrl"></v-img>

              <div class="text-center">
                <div class="pt-6 text-xl font-semibold text-[#333]">
                  {{ item.title }}
                </div>
                <div
                  class="pt-4 mb-10 text-[#786554] underline underline-offset-8"
                  @click="goGallery"
                >
                  {{ item.shop }}
                </div>
              </div>
            </v-card>
          </v-slide-group-item>
        </v-slide-group>
      </v-sheet>
    </v-sheet> -->

    <!-- 产品系列 -->
    <v-sheet color="transparent" class="w-[90%] max-w-[1365px] mx-auto">
      <div class="text-center pt-16">
        <p class="text-[#333] font-buttershine-serif text-2xl lg:text-3xl">
          {{ $t("shop.body.myAlbanyPark.title") }}
        </p>
        <p class="pt-3 pb-10 text-stone-500">
          {{ $t("shop.body.myAlbanyPark.subtitle") }}
        </p>
      </div>
      <div class="d-flex justify-center pb-16">
        <v-sheet color="transparent">
          <v-row>
            <product-card
              v-for="(product, index) in indexProducts"
              :key="index"
              :product="product"
              :col="3"
            />
          </v-row>
        </v-sheet>
      </div>
    </v-sheet>

    <!--    Park展示-->
    <!-- <v-sheet color="#F5F4F2" class="pb-6">
      <div class="text-center pt-16">
        <p class="text-[#333] font-buttershine-serif text-2xl lg:text-3xl">
          {{ $t("shop.body.myAlbanyPark.title") }}
        </p>
        <p class="pt-3 pb-6 text-stone-500">
          {{ $t("shop.body.myAlbanyPark.subtitle") }}
        </p>
      </div>
      <v-sheet color="transparent" class="mx-auto" elevation="0">
        <v-slide-group
          class="pt-4 pb-0"
          selected-class="bg-primary"
          mandatory
          show-arrows
        >
          <v-slide-group-item
            v-for="item in photo_images"
            v-slot="{ isSelected, toggle, selectedClass }"
          >
            <v-card
              rounded="0"
              link
              :class="['ma-3', selectedClass]"
              color="transparent"
              width="250"
              height="250"
              :image="'https://www.lightbicycle.com/images/thumbnail/Mountain-Bike/XC930-Plus/xc930-plus-255g-featherlight-cross-country-carbon-rim-220x220.jpg?t=20210710'"
            >
              <div class="d-flex justify-end">
                <v-icon
                  class="pt-4 pr-4"
                  color="black"
                  icon="mdi-instagram"
                  size="small"
                ></v-icon>
              </div>
            </v-card>
          </v-slide-group-item>
        </v-slide-group>
      </v-sheet>
    </v-sheet> -->

    <!-- 专属于你的设计-->
    <v-sheet>
      <div class="text-center pt-16">
        <p
          class="text-[#333] font-buttershine-serif text-2xl lg:text-3xl pb-10"
        >
          {{ $t("shop.body.myAlbanyPark.unique_title") }}
        </p>
        <!-- <p class="pt-3 pb-6 text-stone-500">
          {{ $t("shop.body.myAlbanyPark.subtitle") }}
        </p> -->
      </div>
      <v-sheet color="transparent" class="d-flex justify-center pb-8">
        <v-sheet color="transparent" class="" width="1365">
          <v-row no-gutters class="d-flex flex-row-reverse">
            <v-col cols="12" md="6" class="d-flex">
              <v-card
                flat
                rounded="0"
                color="#EEE9E3"
                max-height="438"
                class="pa-12 d-flex align-center"
              >
                <div class="text-[#333]">
                  <h1
                    class="font-serif font-semibold lg:text-3xl text-xl py-8 md:text-2xl"
                  >
                    {{ $t("shop.body.myAlbanyPark.unique_subtitle") }}
                  </h1>
                  <div class="text-md leading-9">
                    <p class="py-10">
                      {{ $t("shop.body.myAlbanyPark.unique_text1") }}
                    </p>
                  </div>
                </div>
              </v-card>
            </v-col>
            <v-col cols="12" md="6" class="d-flex align-center">
              <v-img
                :src="'https://www.lightbicycle.com/photowall-compress/AM431-EN431-Review-Custom-Colored-Paints/Light-Bicycle-AM431-EN431-24inch-mtb-bmx-carbon-rims.JPG'"
                max-height="438"
                cover
              />
            </v-col>
          </v-row>
          <v-row no-gutters class="d-flex flex-row-reverse">
            <v-col cols="12" md="6" class="d-flex align-center">
              <v-img src="public/images/home-p-1.jpg" max-height="438" cover />
            </v-col>
            <v-col cols="12" md="6" class="d-flex">
              <v-card
                flat
                rounded="0"
                color="#EEE9E3"
                max-height="438"
                class="pa-12 d-flex align-center"
              >
                <div class="text-[#333]">
                  <h1
                    class="font-serif font-semibold lg:text-3xl text-xl py-8 md:text-2xl"
                  >
                    {{ $t("shop.body.myAlbanyPark.unique_subtitle2") }}
                  </h1>
                  <div class="text-md leading-9">
                    <p class="py-10">
                      {{ $t("shop.body.myAlbanyPark.unique_text2") }}
                    </p>
                  </div>
                </div>
              </v-card>
            </v-col>
          </v-row>
        </v-sheet>
      </v-sheet>

      <!--不同的服务-->
      <v-sheet color="transparent" class="">
        <h1
          class="py-16 text-center font-buttershine-serif text-[#333] text-3xl lg:text-4xl"
        >
          {{ $t("shop.body.myAlbanyPark.apart_title") }}
        </h1>
        <!--  四个图标-->
        <div class="d-flex justify-center pb-8">
          <v-sheet color="transparent">
            <v-row class="">
              <v-col
                v-for="item in image_icons"
                :key="item.id"
                class="d-flex justify-center pa-0"
              >
                <v-card width="334" class="py-6 px-4" color="transparent" flat>
                  <div class="d-flex justify-center">
                    <div class="pb-8">
                      <v-img cover width="96" :src="item.url" />
                    </div>
                  </div>
                  <div>
                    <h1
                      class="text-2xl lg:text-3xl pb-6 text-center text-[#333] font-buttershine-serif"
                    >
                      {{ item.title }}
                    </h1>
                    <p class="text-center text-[#333]">{{ item.text }}</p>
                  </div>
                </v-card>
              </v-col>
            </v-row>
          </v-sheet>
        </div>
      </v-sheet>

      <!--    图片-->
      <!-- <v-sheet color="transparent" class="py-8">
        <banner-image
          HeadImage="https://www.lightbicycle.com/images/storytelling/scott/Konstantin-Kleine-riding.jpeg"
          SubImage="https://www.lightbicycle.com/images/storytelling/scott/Konstantin-Kleine-riding.jpeg"
        />
      </v-sheet> -->
      <!-- 我们的使命 -->
      <!-- <v-sheet color="transparent">
        <h1
          class="py-16 text-center font-buttershine-serif text-[#333] text-3xl lg:text-4xl"
        >
          {{ $t("shop.body.myAlbanyPark.icon_title") }}
        </h1>

        <div class="d-flex justify-center">
          <v-sheet color="transparent" max-width="1100">
            <div class="pb-8">
              <v-row class="">
                <v-col
                  v-for="item in qualityIcons"
                  :key="item.id"
                  class="d-flex justify-center pa-0"
                >
                  <v-card class="pa-16" color="transparent" flat>
                    <div class="d-flex justify-center">
                      <div class="pb-8">
                        <v-img cover width="118" :src="item.url" />
                      </div>
                    </div>
                    <div>
                      <h1 class="text-center text-[#333]">
                        {{ item.title }}
                      </h1>
                    </div>
                  </v-card>
                </v-col>
              </v-row>
            </div>
          </v-sheet>
        </div>
      </v-sheet> -->
    </v-sheet>

    <!--      动态图片-->
    <!-- <v-sheet color="#EEE9E3" class="py-16 d-md-flex justify-md-center">
      <v-sheet color="transparent" max-width="1365">
        <v-row no-gutters justify="center">
          <v-col cols="12" md="6" class="d-flex align-center px-2 px-md-12">
            <v-img
              src="https://oss-cdn.tearful.cn/shop/home/ASSEMBLY_7608eecb-00c0-4267-986b-5a4725017a63_626x385.webp"
              cover
            />
          </v-col>
          <v-col cols="12" md="6" class="">
            <v-card
              flat
              rounded="0"
              color="transparent"
              class="px-4 px-md-12 d-flex align-center"
            >
              <div class="text-[#333]">
                <h1 class="font-serif font-semibold text-2xl py-8">
                  {{ $t("shop.body.assemble_card.assemble_title") }}
                </h1>
                <div class="text-sm leading-9">
                  <p class=" ">
                    {{ $t("shop.body.assemble_card.assemble_text1") }}
                  </p>
                  <p class="pt-10">
                    {{ $t("shop.body.assemble_card.assemble_text2") }}
                  </p>
                </div>
              </div>
            </v-card>
          </v-col>
        </v-row>
        <v-row no-gutters class="pt-8 mt-md-16 pt-md-8 flex-row-reverse">
          <v-col cols="12" md="6" class="d-flex align-center px-2 px-md-12">
            <v-img
              src="https://oss-cdn.tearful.cn/shop/home/HP5050_feature-Lido_03_Ivory_Boucle_0833-928x832_640x576.webp"
              width="667"
              cover
            />
          </v-col>
          <v-col cols="12" md="6" class="d-flex px-4 px-md-12">
            <v-card
              flat
              rounded="0"
              color="transparent"
              class="d-flex align-center"
            >
              <div class="text-[#333]">
                <h1 class="font-serif font-semibold text-2xl py-8">
                  {{ $t("shop.body.assemble_card.coziness_title") }}
                </h1>
                <div class="text-sm leading-9">
                  <p class=" ">
                    {{ $t("shop.body.assemble_card.coziness_text") }}
                  </p>
                </div>
              </div>
            </v-card>
          </v-col>
        </v-row>
      </v-sheet>
    </v-sheet> -->

    <!--    两个沙发图标-->
    <!-- <v-sheet color="#F5F4F2">
      <h1
        class="py-16 text-center font-buttershine-serif text-[#333] text-3xl lg:text-4xl"
      >
        {{ $t("shop.body.myAlbanyPark.share_title") }}
      </h1>
      <v-sheet color="#F5F4F2" class="">
        <sofa-show :Items="buyers" />
      </v-sheet>
    </v-sheet> -->

    <!--  合作企业商标 -->
    <!-- <v-sheet class="d-flex justify-center align-center my-2 flex-wrap py-6">
      <v-card elevation="0" class="rounded-0 px-4">
        <v-img
          width="192"
          cover
          src="https://pic.lightbicycle.com/www/home/images/compressed/PR-Review-Bike-Mag2.png"
        />
      </v-card>

      <v-card elevation="0" class="rounded-0 pa-4">
        <v-img
          width="192"
          cover
          src="https://pic.lightbicycle.com/www/home/images/compressed/PR-Review-Singletracks2.png"
        />
      </v-card>
      <v-card elevation="0" class="rounded-0 pa-4">
        <v-img
          width="192"
          cover
          src="https://pic.lightbicycle.com/www/home/images/compressed/PR-Review-Vital-MTB2.png"
        />
      </v-card>
      <v-card elevation="0" class="rounded-0 pa-4">
        <v-img
          width="192"
          cover
          src="https://pic.lightbicycle.com/www/home/images/compressed/PR-Review-Vital-MTB2.png"
        />
      </v-card>
    </v-sheet> -->

    <!--    流行沙发轮播图-->
    <!-- <v-sheet class="pb-8 pt-16" color="#EEE9E3">
      <h1
        class="text-center font-buttershine-serif text-[#333] text-3xl lg:text-4xl"
      >
        Most Popular
      </h1>

      <v-sheet
        color="transparent"
        class="mx-auto pb-8 w-[100%] sm:w-[491px] md:w-[880px] xl:w-[1265px]"
        elevation="0"
      >
        <v-slide-group
          class="pt-4 pb-0"
          selected-class="bg-primary"
          mandatory
          show-arrows
        >
          <v-slide-group-item
            v-for="item in populars"
            v-slot="{ isSelected, toggle, selectedClass }"
          >
            <v-card
              flat
              rounded="0"
              link
              :class="['ma-3', selectedClass]"
              color="transparent"
              class="pb-8 sm:w-[363px] w-[340px]"
            >
              <v-img width="85" :src="item.saleUrl"></v-img>
              <v-img :src="item.imageUrl"></v-img>
              <div class="d-flex flex-column text-center pt-8">
                <h1 class="font-semibold py-2">{{ item.title }}</h1>
                <p>
                  <span class="text-sm font-thin px-1">from</span>
                  <span class="font-semibold px-1">{{ item.discount }}</span>
                  <span class="text-decoration-line-through text-[#C1C1C1]">{{
                    item.price
                  }}</span>
                </p>
              </div>
            </v-card>
          </v-slide-group-item>
        </v-slide-group>
      </v-sheet>
    </v-sheet> -->

    <!--    三个品牌信誉-->
    <!-- <v-sheet class="d-flex flex-row justify-center py-16" color="#F5F4F2">
      <div>
        <v-row>
          <v-col
            v-for="item in brandIcons"
            :key="item.id"
            class="d-flex justify-center pa-0"
          >
            <v-card
              flat
              color="transparent"
              class="px-6 py-4"
              max-width="445"
              min-width="334"
            >
              <div class="d-flex justify-center py-4">
                <div>
                  <v-img width="108" :src="item.imageUrl"></v-img>
                </div>
              </div>
              <div class="text-center text-[#333]">
                <h1 class="py-4 font-semibold">{{ item.title }}</h1>
                <p class="text-md font-thin">{{ item.text }}</p>
              </div>
            </v-card>
          </v-col>
        </v-row>
      </div>
    </v-sheet> -->
    <!--    <v-card class="py-8">-->
    <!--      屏幕宽度:{{ screenSize.width }}-->
    <!--      屏幕高度:{{ screenSize.height }}-->
    <!--      &lt;!&ndash;      <div>&ndash;&gt;-->
    <!--      &lt;!&ndash;        <v-btn @click="setLocale('en')">英文</v-btn>&ndash;&gt;-->
    <!--      &lt;!&ndash;        <v-btn @click="setLocale('zh')">中文</v-btn>&ndash;&gt;-->
    <!--      &lt;!&ndash;        <p>{{ $tm('welcome') }}</p>&ndash;&gt;-->
    <!--      &lt;!&ndash;        <p>{{ $tm('messages') }}</p>&ndash;&gt;-->
    <!--      &lt;!&ndash;      </div>&ndash;&gt;-->
    <!--    </v-card>-->

    <!-----------------------------------------------------------------------------------------分隔符-------------------------------------------------------------------------------------------------------------->

    <!--    视频插件-->
    <!--        <div id="mse"></div>-->
  </v-app>
</template>

<script setup lang="ts">
import { useUserPinia } from "~/stores/user";
import { storeToRefs } from "pinia";
import { onMounted, ref, onBeforeMount } from "vue";
import ProductCard from "@/pages/products/product-card.vue";
import HP5050 from "~/public/shop/HP5050_banner-Lido_03_Ivory_Boucle_1011-992x1120_672x448.webp";

import bannerImagePc from "~/public/images/pc-introducing-the-all-new-helios-series-mtb-wheels.jpeg";
import bannerImageMo from "~/public/images/mo-introducing-the-all-new-helios-series-mtb-wheels.jpeg";

const { locale, setLocale, tm } = useI18n();
const seo_title = computed(() => {
  return tm("shop.seo.title");
})
const seo_ogTitle = computed(() => {
  return tm("shop.seo.ogTitle");
})
const seo_description = computed(() => {
  return tm("shop.seo.description");
})
const seo_ogDescription = computed(() => {
  return tm("shop.seo.ogDescription");
})

const router = useRouter();

const { $axios } = useNuxtApp();

// 获取首页推荐商品
const indexProducts = ref<any[]>([]);
const fetchIndexProductsData = async () => {
  try {
    // GET请求
    const { code, data } = await $axios.get<any>(
      "/getProductList?query=&page=1&pageSize=4&homeShow=1"
    );

    if (code === "200") {
      indexProducts.value = data.dataList;
    }
    console.log("getProductList 获取数据成功 => ", indexProducts.value);
  } catch (error) {
    console.error("请求失败", error);
  }
};

const swiperData = ref<any>({ imgs: [], name: "", desc: "" });
// 首页数据获取
const fetchSwiperData = async () => {
  try {
    // GET请求
    const { isSuccess, data } = await $axios.get<any>(
      "/getSwiperByType?type=1"
    );

    if (isSuccess) {
      swiperData.value = data;
      // SEO 会根据中英文切换做不同的SEO
      useSeoMeta({
        keywords: swiperData.value.seoKeywords || tm("shop.seo.keywords"),
        title: swiperData.value.seoTitle || seo_title,
        ogTitle: swiperData.value.seoTitle || seo_ogTitle,
        description: swiperData.value.seoDesc || seo_description,
        ogDescription: swiperData.value.seoDesc || seo_ogDescription,
        ogImage: 'https://oss-cdn.tearful.cn/shop/banner/AP_memorial_day_sale_BANNERSv2-01_2048x2048.webp'
      })
    }

    console.log("获取数据成功 => ", swiperData.value);

    // POST请求示例
    // const result = await $axios.post('/users', { name: 'test', email: 'test@example.com' })
  } catch (error) {
    console.error("请求失败", error);
  }
};

const userStore = useUserPinia();
const { token, rating_five } = storeToRefs(userStore);

// import Player from "xgplayer";
// import "xgplayer/dist/index.min.css";
// onMounted(() => {
//   new Player({
//     id: "mse", //元素id
//     lang: "zh", //设置中文
//     volume: 0, // 默认静音
//     autoplay: false, //自动播放
//     screenShot: true, // 开启截图功能
//
//     //视频地址
//     url: "https://cdn.free-stock.video/25122023/abstract-curve-chaos-paint-ink-that-design-91614-small.mp4",
//
//     //封面图
//     poster:
//         "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
//     fluid: true, // 填满屏幕 （流式布局）
//     playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
//   });
// });
/**
 * 屏幕尺寸
 */
const screenSize = ref({ width: 0, height: 0 });

/**
 * 图片是否加载完成
 */
const home_image1_load = ref(false);

/**
 * 获取组元素组件的宽度
 */
const getGroupWidth: any = computed(() => {
  if (screenSize.value.width > 1470) {
    return 1440;
  } else if (screenSize.value.width > 1008) {
    return 1000;
  } else {
    return 560;
  }
});

/**
 * 响应式i18n
 */
const image_icons = computed(() => {
  return tm("shop.body.choose.shopIcons");
});

const style_images = computed(() => {
  return tm("shop.body.choose.shopList");
});
const qualityIcons = computed(() => {
  return tm("shop.body.qualityIcons");
});
const buyers = computed(() => {
  return tm("shop.body.buyer");
});
const populars = computed(() => {
  return tm("shop.body.popular");
});
const brandIcons = computed(() => {
  return tm("shop.body.brandIcons");
});
const photo_images = computed(() => {
  return tm("shop.body.photos");
});

// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};

onMounted(() => {
  window.addEventListener("resize", updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();
  fetchSwiperData();
  fetchIndexProductsData();
});

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener("resize", updateScreenSize);
});

/**
 * 图片加载完成回调
 * @param val 图片地址
 */
const image_load = (val: any) => {
  // console.log("Image load successfully")
  home_image1_load.value = true;
};

const goGallery = () => {
  router.push({ path: "/product-gallery" });
};

const handleClick = (item: any) => {
  const { origin } = window.location;
  const targetLink = origin + "/product-detail?id=" + item.pid;
  window.open(targetLink, "_blank");
};

</script>

<style scoped>
</style>